<template>
	<div :class="drag ? 'resize' : ''" class="drag-resize-component" :style="{ left: option.x + 'px', top: option.y + 'px' }">
		<div v-show="drag" ref="text" id="text">
			<span class="br"></span>
			<span class="bl"></span>
			<span class="tr"></span>
			<span class="tl"></span>
		</div>
		<div>{{ option.data }}</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		drag: {
			// 是否可拖拽，默认true
			type: Boolean,
			default: false
		},
		width: {
			type: [String, Number],
			default: 800
		},
		height: {
			type: [String, Number],
			default: 500
		},
		option: {
			type: Object,
			default: function() {
				return {
					x: 0,
					y: 0
				};
			}
		},
		index: {
			type: [Number, String]
		}
	},
	mounted() {
		this.initDrag();
		this.initResize();
	},
	methods: {
		// 初始化可缩放
		initResize() {
			let el = this.$el;
			let spanNodes = this.$refs.text.childNodes;
			for (let i = 0; i < spanNodes.length; i++) {
				this.resizeElementFun(spanNodes[i], el);
			}
		},
		resizeElementFun(element, el) {
			element.onmousedown = function(ev) {
				let oEv = ev || event;
				oEv.stopPropagation();
				let oldWidth = el.offsetWidth;
				let oldHeight = el.offsetHeight;
				let oldX = oEv.clientX;
				let oldY = oEv.clientY;
				let oldLeft = el.offsetLeft;
				let oldTop = el.offsetTop;
				document.onmousemove = function(ev) {
					// oEv.stopPropagation();
					let oEv = ev || event;
					let disY = oldTop + (oEv.clientY - oldY);
					// let disX = (oldLeft + (oEv.clientX - oldLeft));
					let disX = oldLeft + (oEv.clientX - oldX);
					if (disX > oldLeft + oldWidth) {
						disX = oldLeft + oldWidth;
					}
					if (disY > oldTop + oldHeight) {
						disY = oldTop + oldHeight;
					}
					if (element.className == 'tl') {
						el.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
						el.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
						el.style.left = disX + 'px';
						el.style.top = disY + 'px';
					} else if (element.className == 'bl') {
						el.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
						el.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
						el.style.left = disX + 'px';
						// el.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
					} else if (element.className == 'tr') {
						el.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
						el.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
						el.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
						el.style.top = disY + 'px';
					} else if (element.className == 'br') {
						el.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
						el.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
						el.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
						// el.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
					}
				};
				document.onmouseup = function() {
					document.onmousemove = null;
				};
				return false;
			};
		},
		// 初始化可拖拽方法计算xy
		initDrag() {
			let el = this.$el,
				width = this.width,
				height = this.height,
				that = this;
			el.onmousedown = e => {
				e.preventDefault();
				e.target.style.cursor = 'move';
				//鼠标按下，计算鼠标触点距离元素左侧和顶部的距离
				let disX = e.clientX - el.offsetLeft;
				let disY = e.clientY - el.offsetTop;
				document.onmousemove = function(e) {
					//计算需要移动的距离
					let tX = e.clientX - disX;
					let tY = e.clientY - disY;
					//移动当前元素
					if (tX >= 0 && tX <= width - el.offsetWidth) {
						el.style.left = tX + 'px';
					}
					if (tY >= 0 && tY <= height - el.offsetHeight) {
						el.style.top = tY + 'px';
					}
					that.setComponentList({
						x: parseFloat(el.style.left),
						y: parseFloat(el.style.top)
					});
				};
				//鼠标松开时，注销鼠标事件，停止元素拖拽。
				document.onmouseup = function(e) {
					document.onmousemove = null;
					document.onmouseup = null;
					e.target.style.cursor = 'default';
					that.setComponentList({
						x: parseFloat(el.style.left),
						y: parseFloat(el.style.top)
					});
				};
			};
		},
		setComponentList(data) {
			var opt = {
				id: this.index,
				data
			};
			this.$store.commit('setComponentList', opt);
		}
	}
};
</script>

<style>
.drag-resize-component {
	position: absolute;
	cursor: default;
	padding: 10px;
}
.resize {
	border: 1px dashed rgb(0, 0, 0, 0.4);
}
.tl,
.bl,
.br,
.tr {
	width: 10px;
	height: 10px;
	position: absolute;
	background: #fff;
	border: 1px solid #666;
	z-index: 2;
	border-radius: 50%;
	cursor: nwse-resize;
}
.tl,
.bl {
	left: -6px;
}
.tr,
.br {
	right: -6px;
}
.br,
.bl {
	bottom: -6px;
}
.tl,
.tr {
	top: -6px;
}
.tr,
.bl {
	cursor: nesw-resize;
}
</style>
